<template>

  <div id="index">

      <nav-bar class="homeNav">
        <template v-slot:NavBar_center>
          <slot>来购</slot>
        </template>
      </nav-bar>
      <home-swiper :banners="banners"></home-swiper>
      <recommend-view :recommend="recommend"></recommend-view>
      <scoptimg></scoptimg>

      <tap-control
        class="tap-control"
        :titles="['流行', '新款', '精选']"
        @tapclick="tapclick"
      ></tap-control>
      <goods-list :goods="showgoods"></goods-list>

      <button-back
        v-show="backbutton"
        @buttonbackclick="buttonbackclick"
      ></button-back>

      <mainTap-bar></mainTap-bar>

      <button-back
        v-show="continuew"
        class="button_back_old"
        @buttonbackclick="createdstate"
      ></button-back>


  </div>


</template>

<script>
// @ is an alias to /src
// 导入navbar
import NavBar from "../../components/commom/navbar/NavBar.vue";
import HomeSwiper from "./childcomps/homeswiper.vue";
import RecommendView from "./childcomps/RecommendView.vue";
import Scoptimg from "./childcomps/scoptimg.vue";
import GoodsList from "../../components/content/goods/Goodslist.vue";
import ButtonBack from "./childcomps/buttonback.vue";

import TapControl from "../../components/content/TapControl/TapControl.vue";

import mainTapBar from "../../components/TapBar/main.TapBar.vue";

// 导入axios
// import axios from '../../network/request'
// 导入index.js网络请求模块

import { getHomeMultidata, getHomeGoods } from "../../network/index";

// vue实例
export default {
  name: "index",
  components: {
    NavBar,
    HomeSwiper,
    RecommendView,
    Scoptimg,
    TapControl,
    GoodsList,
    ButtonBack,
    mainTapBar,
  },
  directives: {},
  data() {
    return {
      saveYy: 0,
      banners: [],
      recommend: [],
      // 记录商品
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      currnttype: "pop",
      backbutton: false,
      continuew: true,

      // 主页事件监听
      // itemimgListener:null,
    };
  },
  computed: {
    showgoods() {
      return this.goods[this.currnttype].list;
    },
  },

  mounted() {
    this.mountedstart();
    console.log("scroll" + this.saveYy);

    console.log("created" + this.$store.state.saveY);
    console.log(this.saveYy);
    if (this.$store.state.saveY === undefined) {
      this.continuew = false;
    } else {
      this.continuew = true;
    }
  },

  created() {
    // 首页创建

    this.getHomeMultidata();
    // 请求商品数据
    this.getHomeGoods("pop");
    this.getHomeGoods("new");
    this.getHomeGoods("sell");
    console.log("主页被创造出来了");
  },
  beforeDestroy() {
    // window.removeEventListener("mountedstart", this.mountedstart());
  },
  destroyed() {
    // removeEventListener("beforeRouteLeave",this.startwindowEVent(),false)
    console.log("主页被销毁了");
    // deactivated()
  },

  beforeRouteLeave(to, from, next) {
    this.$store.commit("SetSavey", this.saveYy);
    // deactivated()
    // showstateSaveY()

    console.log("路由将离开");
    // removeEventListener("mountedstart",this.mountedstart)
    next();
  },
  methods: {
    // 事件监听
    tapclick(index) {
      switch (index) {
        case 0:
          this.currnttype = "pop";
          break;
        case 1:
          this.currnttype = "new";
          break;
        case 2:
          this.currnttype = "sell";
      }
    },

    // 返回刚才浏览位置
    createdstate() {
      var distancest = this.$store.state.saveY;
      document.documentElement.scrollTop = distancest;
      console.log("distancest" + distancest);
    },

    buttonbackclick() {
      // var distance = this.$store.state.saveY;
      var distance = this.windowHeight;
      document.documentElement.scrollTop = distance;
    },

    // 滚动条y值保存
    // deactivated(){
    //   this.saveY=this.document.documentElement.scrollHeight || document.body.scrollHeight
    //   console.log(this.saveY)
    //   // 取消全局事件监听
    //   // this.$bus.$off('itemImgload',this.itemimgListener)
    // },
    loadmoregoods() {
      this.getHomeGoods(this.currnttype);
    },

    mountedstart() {
      // let succ = null
      let that = this;
      window.onscroll = function () {
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight =
          document.documentElement.scrollHeight || document.body.scrollHeight;
        // console.log("正在监听滚动事件");

        that.saveYy = scrollTop;

        console.log("滚动时的saveYy" + that.saveYy);

        console.log("state:" + that.$store.state.saveY);

        // console.log(that.$store.state.saveY)

        if ((scrollTop + windowHeight).toFixed(0) <= 2000) {
          that.backbutton = false;
        } else {
          that.backbutton = true;
        }

        // 滚动底部发送网络请求
        // setTimeout(() => {
        if ((scrollTop + 1 + windowHeight).toFixed(0) >= scrollHeight) {
          // succ=true
          console.log("scrollTop:" + scrollTop);
          console.log("windowHeight:" + windowHeight);
          console.log("scrollHeight:" + scrollHeight);
          //到了这个就可以进行业务逻辑加载后台数据了
          console.log("到了底部");
          // if(succ=true){
          that.loadmoregoods();
          scrollTop--;

          // }
        } else {
          // clearTimeout
          // succ=false
        }
        // },1000);
      };
    },

    // 滚动条防抖
    debounce(fn, wait) {
      let timeout = null;
      return function () {
        if (timeout !== null) clearTimeout(timeout);
        timeout = settimeout(fn, wait);
      };
    },

    // start
    startwindowEVent() {
      window.addEventListener("scroll", debounce(mountedstart, 2000));
    },

    // 网络请求方法
    getHomeMultidata() {
      getHomeMultidata().then((res) => {
        // console.log(res)
        this.banners = res.data.data.banner.list;
        this.recommend = res.data.data.recommend.list;
      });
    },

    getHomeGoods(type) {
      const page = this.goods[type].page + 1;
      getHomeGoods(type, page).then((res) => {
        //  console.log(res)
        this.goods[type].list.push(...res.data.data.list);
        this.goods[type].page++;
        // this.mountedstart();
        // this.startwindowEVent();
        // console.log(this.goods.pop)
      });
    },
  },
};
</script>

<style scoped>
.homeNav {
  background: #696969;
  color: #fff;
}
.buttonback img .button_back_old img {
  display: none;
}
.button_back_old {
  left: 86vw;
  top: 30vw;

    background: no-repeat 100% 100%;
    background-color: #fff !important;
  /* background-image: url(%0ARSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6%0ALy93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+%0APHN2ZyB0PSIxNjQ1MTY5MTI1NzY4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0i%0AMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3%0Ady53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIwNzQ4IiB3aWR0aD0iNDgiIGhl%0AaWdodD0iNDgiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5%0AL3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+%0APC9kZWZzPjxwYXRoIGQ9Ik01MTIgNzM2YTIyNCAyMjQgMCAxIDEgMC00NDgg%0AMjI0IDIyNCAwIDAgMSAwIDQ0OHogbTAtNjRhMTYwIDE2MCAwIDEgMCAwLTMy%0AMCAxNjAgMTYwIDAgMCAwIDAgMzIweiIgcC1pZD0iMjA3NDkiPjwvcGF0aD48%0AcGF0aCBkPSJNNTEyIDg2NEMzMjMuMjMyIDg2NCAxNTQuMTQ0IDc1MS4yNjQg%0ANS40NCA1MjkuODU2YTMyIDMyIDAgMCAxIDAtMzUuNzEyQzE1NC4xNDQgMjcy%0ALjcwNCAzMjMuMiAxNjAgNTEyIDE2MGMxODguNzY4IDAgMzU3Ljg1NiAxMTIu%0ANzM2IDUwNi41NiAzMzQuMTQ0YTMyIDMyIDAgMCAxIDAgMzUuNzEyQzg2OS44%0ANTYgNzUxLjI5NiA3MDAuOCA4NjQgNTEyIDg2NHogbTAtNjRjMTU5Ljg0IDAg%0AMzA2LjcyLTk0Ljc4NCA0NDEuMjQ4LTI4OEM4MTguNzIgMzE4Ljc4NCA2NzEu%0AODQgMjI0IDUxMiAyMjRjLTE1OS44NCAwLTMwNi43MiA5NC43ODQtNDQxLjI0%0AOCAyODggMTM0LjUyOCAxOTMuMjE2IDI4MS40MDggMjg4IDQ0MS4yNDggMjg4%0AeiIgcC1pZD0iMjA3NTAiPjwvcGF0aD48L3N2Zz4=); */
  /* right: 70vw; */

}
</style>